<template>
	<view class="an-body pB100ux">
		<!-- <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" > -->
		
		<view class="bg_white p5 borderb1">		
			<view class="tablist flex flexcenter w90 mauto ">
				<view :class="showtab=='1'?'on':''" @click="choosetab('1')">
					被约待审
				</view>
				<view :class="showtab=='2'?'on':''"  @click="choosetab('2')">
					取消被约
				</view>
				<view :class="showtab=='3'?'on':''"  @click="choosetab('3')">
					同意被约
				</view>
				
			</view>
		</view>
		<view class="comsterlist" v-if="showtab=='1'">	
			
			<nodata v-if="audlist.length==0"></nodata> 
			<view class="topics borderb1" v-for="(item,index) in audlist">
				<view class="an-top-bg bg_white p5 pL10 pR10" >
					<!-- 用户信息 -->				 
					<!-- <view class="company">{{item.company_name}}</view> -->
					<view class="an-userInfo">
						<view class="an-user">
							<image style="width: 40px; height: 40px; background-color: #eeeeee;" mode="aspectFill" :src="item.vister_personimg | personimg" @error="imageError"></image>
						</view>
						<view class="an-user-text1">
							<view style="color: black;">
								<view class="an-user-first">
									<p>访客姓名：{{item.vister_name?item.vister_name:'用户不存在'}}</p>
									<p class="pT5">访客电话：{{item.vister_mobile?item.vister_mobile:''}}</p>
									<p>到访状态：待审核</p>
								</view>
								<view class="an-user-second">									
									<p class='topics-operation pT5'><view class="topics-details" :class="delchanger?'':'mlA'" @click="audshowdel(item)">详情</view></p>
								</view>
							</view>
						</view>
					</view>
				</view>	
			</view>		
		</view>
		
		<view class="adulist" v-if="showtab=='2'">
			<view class="times list ">
				<view class="an-index-grid2 tCenter p5 pL10 pR10 bodybg">
					<view class="tabshow pR5" @click="choosedate('end')">
						<span class='borderr8 p2 pL5 pR5 borderall'>{{enddate?enddate:'请选择日期'}} <uni-icons class="pL5" type="arrowdown" size="10"></uni-icons></span>
					</view>
				</view>
			</view>
			<nodata v-if="audlist.length==0"></nodata> 
			<view class="topics borderb1" v-for="(item,index) in audlist">
				<view class="an-top-bg bg_white pL10 pR10 p5" >
					
					<view class="an-userInfo">
						<view class="an-user">
							<image style="width: 40px; height: 40px; background-color: #eeeeee;" mode="aspectFill" :src="item.vister_personimg | personimg" @error="imageError"></image>
						</view>
						<view class="an-user-text1">
							<view style="color: black;">
								<view class="an-user-first">
									<p>访客姓名：{{item.vister_name?item.vister_name:'用户不存在'}}</p>
									<p class="pT5">访客电话：{{item.vister_mobile?item.vister_mobile:''}}</p>
									<p>到访状态：{{item.m_tips}} </p>
									<!-- <p>{{item.app_visittime}}</p> -->
								</view>
								<view class="an-user-second">
								<!-- 	<p>{{retime(item.app_visittime)}}</p> -->
									<!-- <p>到访部门：{{item.address?item.address:'暂无'}}</p> -->
									<p class='topics-operation pT5'><view class="topics-details" :class="delchanger?'':'mlA'" @click="detailedad(item)">详情</view></p>
								</view>
							</view>
						</view>
					</view>
				
				</view>	
			</view>		
		</view>
		
		<view class="adulist" v-if="showtab=='3'">
			<view class="times list ">
				<view class="an-index-grid2 tCenter p5 pL10 pR10 bodybg">
					<view class="tabshow pR5" @click="choosedate('end')">
						<span class='borderr8 p2 pL5 pR5 borderall'>{{enddate?enddate:'请选择日期'}} <uni-icons class="pL5" type="arrowdown" size="10"></uni-icons></span>
					</view>
				</view>
			</view>
			<nodata v-if="audlist.length==0"></nodata> 
			<view class="topics borderb1" v-for="(item,index) in audlist">
				<view class="an-top-bg bg_white pL10 pR10 p5" >
					
					<view class="an-userInfo">
						<view class="an-user">
							<image style="width: 40px; height: 40px; background-color: #eeeeee;" mode="aspectFill" :src="item.vister_personimg | personimg" @error="imageError"></image>
						</view>
						<view class="an-user-text1">
							<view style="color: black;">
								<view class="an-user-first">
									<p>访客姓名：{{item.vister_name?item.vister_name:'用户不存在'}}</p>
									<p class="pT5">访客电话：{{item.vister_mobile?item.vister_mobile:''}}</p>
									<p>到访状态：{{item.m_tips}} </p>
									<!-- <p>{{item.app_visittime}}</p> -->
								</view>
								<view class="an-user-second">
								<!-- 	<p>{{retime(item.app_visittime)}}</p> -->
									<!-- <p>到访部门：{{item.address?item.address:'暂无'}}</p> -->
									<p class='topics-operation pT5'><view class="topics-details" :class="delchanger?'':'mlA'" @click="detailedad(item)">详情</view></p>
								</view>
							</view>
						</view>
					</view>
				
				</view>	
			</view>		
		</view>
		
		<w-picker
			:visible.sync="date1visible"
			mode="date" 
			startYear="2020" 
			endYear="2030"
			value="showyearin"
			:current="true"
			fields="day"
			@confirm="onConfirm($event,'date')"
			@cancel="onCancel"
			:disabled-after="false"
			ref="date" 
		></w-picker>
			<!-- </mescroll-uni>
		 -->	
<backnext></backnext>
		<!-- 底部导航 -->
		<footernav pagePath='user'></footernav>
		
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { hostRoot } from '@/common/util.js';
import defaultImg from '@/static/img/userImg.jpg';
import wPicker from '@/components/w-picker/w-picker.vue';
import {appointmentgetlist} from "@/common/api/appointment.js"
import {visiteradd,visiteredit,visiterdel,visiterlist,applogslist} from '@/common/api/visiter.js'
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import {timestampToTime} from "@/common/common.js"
const icoList = [
	{
		id: 1,
		ico: 'icon-icon-test7',
		text: '文章管理',
		color: 'color1'
	},
	{
		id: 2,
		ico: 'icon-icon-test3',
		text: '留言管理',
		color: 'color2'
	},
	{
		id: 3,
		ico: 'icon-icon-test6',
		text: '打卡管理',
		color: 'color3'
	},
	{
		id: 4,
		ico: 'icon-wode',
		text: '用户管理',
		color: 'color4'
	}
];
export default {
	computed: {
		...mapState(['hasLogin', 'forcedLogin', 'userInfo'])
	},
	components: {
		wPicker
	},
	data() {
		return {
			showtab:"1",
			userSrc: defaultImg,
			grids: [],
			visiterlist:[],
			audlist:[],
			page:1,
			pageSize:10,
			showstatus:'1',
			delchanger:false,
			date_t1:"",
			date_t2:"",
			startdate:"",
			enddate:"",
			datetype:'',
			date1visible:false,
		};
	},
	onLoad(event) {
		var  date = new Date();//时间戳为10位需*1000，时间戳为13位的话不需乘1000	
		var Y = date.getFullYear() + '-';
		var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';			 
		var D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate()) + ' ';
		this.enddate=Y+M+D;
		if(event.type=='3'){
			this.page=1;
			this.showtab='3';
			this.audlistshow()
		}else{
			this.enddate='';
			this.audlistshow()
		}
		uni.getStorage({
			key:'userinfo',
			success: (res) => {
				if(res.data.roleid == 1 || res.data.roleid == 2 || res.data.roleid == 3){
					this.delchanger = true
				}
			}
		})
		
		this.userSrc = hostRoot + 'uploads/' + this.userInfo.photoUrl;
	},
	onShow() {
		//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		this.grids = [];
		if (!this.hasLogin) {
			this.bindLogin();
		} else if (this.userInfo.grade == 2 || this.userInfo.grade == 3) {
			this.grids = icoList;
		} else {
			this.grids.push(icoList[0]);
			this.grids.push(icoList[1]);
		}
	},
	methods: {
		onConfirm(res,val) {
			console.log(res)
			console.log(val);
			var datetype=this.datetype;
			//如果页面需要调用多个mode类型，可以根据mode处理结果渲染到哪里;
			switch (datetype) {
				case 'start':
					this.startdate = res.value
					break;
				case 'end':
					this.enddate = res.value
					break;
				
			}
			
			this.page=1;
			// this.showtab='2';
			this.audlist=[];
			this.audlistshow();
			// if(this.enddate&&this.startdate){
			// 	var enddate1 = new Date(this.enddate);
			// 	var enddate = enddate1.getTime();
				
			// 	var startdate1 = new Date(this.startdate);
			// 	var startdate = startdate1.getTime();
			// 	if(startdate>enddate){
			// 		uni.showToast({
			// 			icon: 'none',
			// 			title: '请选择正确的时间'
			// 		});
			// 		return;
			// 	}
				
				
			// 	this.page=1;
			// 	this.getlist=[];
			// 	this.getlistrequest();
			// }else if(this.enddate){
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '请选择开始的时间'
			// 	});
			// }else if(this.startdate){
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '请选择结束的时间'
			// 	});
			// }
			
			// vis_state:"",
			// date_t1:"",
			// date_t2:"",
			// this.resultInfo = { ...val };
			// this.isActive = false;
		},
		
		choosedate(type){
			this.datetype=type;
			this.date1visible=true;
		},
		backRefresh(type){ //返回刷新带参数
		
			this.audlist=[];
			this.page=1;
			this.showtab='2';
			this.audlistshow()
		},
		
		retime(val){
			return timestampToTime(val)
		},
		audlistshow(){
				applogslist({
					'page':this.page,
					 status:this.showstatus,
					'pagesize':this.pageSize,
					'end_time':this.enddate
				}).then(res=>{
					if(res.data.code == 400){
						return
					}
					// this.visiterlist = res.data.data
				this.page++
				for (let i = 0; i < res.data.data.length; i++) {
					this.audlist.push(res.data.data[i])
				}
				})
		},
		...mapMutations(['logout']),
		/*获取访客列表*/
		
		clickBtn(id) {
			let url = '';
			switch (id) {
				case 1:
					url = '../yaoqing/yaoqing';
					break;
				case 2:
					url = '../message/messageList/messageList';
					break;
				case 3:
					url = '../sign/sign';
					break;
				case 4:
					url = '../user/userList';
					break;
				default:
					url = '../main/main';
			}
			uni.navigateTo({
				url: url
			});
		},
		choosetab(tab){
			this.visiterlist=[];
			this.audlist=[];
			this.page=1;
			this.enddate='';
			this.showtab=tab;
			if(tab=='1'){
				this.showstatus='1';
				this.audlistshow();
			}else if(tab=='2'){
				this.showstatus='2';
				this.audlistshow();
			}else{
				this.showstatus='3';
				this.audlistshow();
			}
		},
		audshowdel(item) {
		
			uni.navigateTo({
				url: '/pages/user/visitorauditDetails'+'?skipstate=c_adu&visitorinfo='+JSON.stringify(item)
			});
		},
		bindLogin() {
			uni.navigateTo({
				url: '../login/login'
			});
		},
		bindLogout() {
			this.logout();
			uni.reLaunch({
				url: '../login/login'
			});
		},
		imageError(e) {
			this.userSrc = defaultImg;
		},
		/*详情*/
		detailedad(item){
			// uni.navigateTo({
			// 	url: './visitorDetails'
			// });
			// uni.navigateTo({
			// 	url: './myyuyue/appointmentDetailsadu'+'?visitorinfo='+JSON.stringify(item)
			// });
			uni.navigateTo({
			    url: '/pages/myyuyue/appointmentDetailsadu?id='+item.meeting_id
			});
		},
		/*删除长期访问人*/
		del(id){
			let _that  = this
			uni.showModal({
			    title: '该访客不再设为长期访问',
			    // content: 'gg',
			    success: function (res) {
			        if (res.confirm) {
						visiterdel({'id':id}).then(res=>{
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
							if(res.data.code==200){
								_that.visiterlist=[];
								_that.page=1;
							}
						})
			            // console.log('用户点击确定');
			        } else if (res.cancel) {
						return 
			            // console.log('用户点击取消');
			        }
			    }
			});
		
		},
		/*检查状态*/
		checkstatus(e){
			// console.log(this.getlist[e])
			let m_status = e;
			// if(iteminfo.m_status==0){
			// 	return '已审核';
			// }else if(iteminfo.m_status==6){
			// 	return '已审核';
			// }else if(iteminfo.m_status==7){
			// 	return '已审核';
			// }else if(iteminfo.m_status==9){
			// 	return '审核不过';
			// }else if(iteminfo.m_status==13){
			// 	return '已审核';
			// }else{
			// 	return '已审核';
			// }
			if(m_status==9){
				return '不同意';
			}else if(m_status==12){
			 	return '取消预约';
			}else{
				return '同意接待';
			}
			
			
		},

		
	}
};
</script>

<style lang="scss" scoped>
	.tablist .on{border-bottom: 2px solid #ed6c19;}
.an-user {
	.an-quick {
		display: flex;
		flex-direction: row;

		padding: 15px 15px;
		.an-ico-item {
			// width: 25%;
			text-align: center;
			.an-ico-img {
				text-align: center;
				width: 40px;
				height: 40px;
				line-height: 40px;
				margin: 0 auto;
				border-radius: 50%;
				color: #ffffff;
				.iconfont {
					font-size: 21px;
				}
				&.color1 {
					//background-color: #e9f4fd;
					background: linear-gradient(#bb51fb, #883ffe);
				}
				&.color2 {
					background: linear-gradient(#f9ac8e, #ec5e5c);
				}
				&.color3 {
					background: linear-gradient(#78f5b1, #34ce78);
				}
				&.color4 {
					background: linear-gradient(#68aefb, #007aff);
				}
			}
		}
	}
	.an-list {
		.an-ico {
			margin-right: 10px;
			.iconfont {
				font-size: 21px;
			}
			&.color1 {
				color: #ec5e5c;
			}
			&.color2 {
				color: #883ffe;
			}
			&.color3 {
				color: #34ce78;
			}
			&.color4 {
				color: #007aff;
			}
		}
	}
}
.uni-list-cell-divider{
	    background-color: white;
}
.an-top-bg{
	height: auto;
	 // padding: 0px 0px 0px 0px;
	position: static !important;
}
	
uni-button{
	width: 80px;
	height: 30px;
	font-size: 15px;
	line-height: 30px;
}
.cc{
	background: #007aff;
	color: white;
	margin-right: 10px;
	float: right;
}
.cc2{
	background: #ED6C19;
	color: white;
	margin-right: 10px;
	float: right;
}
.an-userInfo{
	background: white;
	// margin-top: 10px;
}
.an-user{
	margin-top: 5px;
	width: 13%;
}
.an-user image{
	border-radius:50% ;
}
.an-user-text{
	margin-top: 5px;
}
.cc-view{
	text-align: right;
	margin-top: 5px;
}
.an-user-text1{
	width: 80%;
	margin-bottom: 10px;
	margin-left:2%;
}
.company{
	color: black;
	margin-left: 10px;
}
.an-user-first{
	float: left;
	width: 70%;
	// margin-top: 10px;
}
.an-user-second{
	float: left;
	width: 30%;
	// margin-top: 10px;
	text-align: right;
}
	.topics-operation {
		
		justify-content: flex-end;
		// width: 65%;
		margin-left: auto;
		display: flex;
		uni-view {
			width: 60px;
			height: 24px;
			margin: 0 5px;
			color: rgba(255, 255, 255, 1);
			background-color: rgba(212, 48, 48, 1);
			border-radius: 18px;
			font-size: 15px;
			line-height: 24px;
			text-align: center;
		}
		.topics-modify {
			color: rgba(80, 80, 80, 1);
			background-color: rgba(166, 166, 166, 1);
		}
		.topics-details {
			background-color: rgba(42, 130, 228, 1);
		}
	}
	
	.an-index-grid {
			display: flex;
			flex-direction: row; //主轴方向
			flex-wrap: wrap; //换行
			justify-content: space-between; //主轴上的对齐方式
		}
		.an-index-grid2 {
				display: flex;
				flex-direction: row; //主轴方向
				flex-wrap: wrap; //换行
			}
	.topnavfeer{position: absolute;z-index: 999;top: 0;}	
	.topnavfeer .tablist{border-top: 0.5px solid #c8c7cc;border-bottom: 0.5px solid #c8c7cc;}
	.topnavfeer .tabshow .on{border-bottom: 2px solid #ED6C19;}
	
</style>
